<template>
  <!-- 显示我们的东西还要使用keep-alive ，还要瀑布流，还要懒加载。。。懒加载都是给图片的，这个需要一个新的小组件，并且已后台数据驱动的。可以放在后边搞，现在先写死，把样式搞定。到时候可以直接放在组件中。暂时先要写死-->
  <div class="goodsShow">
    <ul class="waterLeft">
      <li v-for="(content, index) in newContent[0]" :key="index">
        <div class="imgContain">
          <img v-lazy="content.img" alt="" />
        </div>
        <div class="name van-multi-ellipsis--l2">
          {{ content.name }}
        </div>
        <div class="newPrice">
          <span>￥{{ content.newprice }}</span>
          <span>看相似</span>
        </div>
        <div class="oldPrice">￥{{ content.oldprice }}</div>
        <div class="label">
          <span>{{ content.maidian }}</span>
        </div>
      </li>
    </ul>
    <ul class="waterRight">
      <li v-for="(content, index) in newContent[1]" :key="index">
        <div class="imgContain">
          <img v-lazy="content.img" alt="" />
        </div>
        <div class="name van-multi-ellipsis--l2">
          {{ content.name }}
        </div>
        <div class="newPrice">
          <span>￥{{ content.newprice }}</span>
          <span>看相似</span>
        </div>
        <div class="oldPrice">￥{{ content.oldprice }}</div>
        <div class="label">
          <span>{{ content.maidian }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
//chuang
export default {
  name: "GoodsShowTool",
  props: ["jingxuan"],
  data() {
    return {
      newContent: [[], []],
    };
  },
  watch: {
    jingxuan: {
      handler(newVal, oldVal) {

          let newContent1 = [[], []];
          this.jingxuan.forEach((a, index) => {
            switch (index % 2) {
              case 0:
                newContent1[0].push(a);
                break;
              case 1:
                newContent1[1].push(a);
                break;
            }
          });
          this.newContent = newContent1;
        }

        


    },
  },
};
</script>

<style scoped>
.goodsShow {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
}

.goodsShow ul {
  width: 48%;
}
.goodsShow li {
  width: 100%;
  border-radius: 0.1rem;
  background-color: white;
  box-sizing: border-box;
  padding-bottom: 0.1rem;
  margin-top: 0.1rem;
}
.goodsShow li div {
  width: 90%;
  margin: 0 auto;
}
.imgContain {
  width: 100%;
  border-radius: 0.1rem 0.1rem 0 0;
}
.imgContain img {
  width: 100%;
  border-radius: 0.1rem 0.1rem 0 0;
}
.newPrice {
  display: flex;
  justify-content: space-between;
}
.newPrice span:nth-child(1) {
  color: orange;
}
.newPrice span:nth-child(2) {
  color: rgb(189, 186, 186);
  display: block;
  border-radius: 0.08rem;
  border: 0.01rem solid rgb(189, 186, 186);
  font-size: 0.12rem;
  line-height: 0.2rem;
}
.oldPrice {
  color: rgb(189, 186, 186);
  text-decoration: line-through;
  font-size: 0.12rem;
}
.label span {
  display: inline-block;
  border-radius: 0.03rem;
  font-size: 0.12rem;
  color: rgb(189, 186, 186);
  border: 0.01rem solid rgb(189, 186, 186);
}
</style>